<template>
    <div class="wrap">
        <div class="container">
            <TopBreadCrumb></TopBreadCrumb>
            <div class="user_center_content">
                <!-- 左侧菜单 -->
                <LeftNavMenu></LeftNavMenu>
                <!-- 左侧菜单结束 -->
                <!-- 右侧内容开始  -->
                <div class="right_user_content">
                    <div class="right-title border-bottom">
                        <div class="left">账号信息</div>
                    </div>
                    <div class="account-content" v-loading="loading">
                        <el-form ref="form" :model="form" label-width="170px" label-position="left">
                            <el-form-item label="个人头像：">
                                <CustomAvatarUpload v-model="form.avatar"></CustomAvatarUpload>
                            </el-form-item>
                            <el-form-item label="账号：">
                                <el-input v-model="form.username" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="手机号：">
                                <el-input v-model="form.mobile" disabled></el-input>
                            </el-form-item>
                            <el-form-item>
                                <nuxt-link to="/agency/accountInfoEdit/password">
                                    <el-button class="btn-main">修改密码</el-button>
                                </nuxt-link>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
                <!-- 右侧内容结束 -->
            </div>
        </div>
    </div>
</template>

<script>
import api from "@/api/user";
import { setUser } from "@/utils/auth";
export default {
    data() {
        return {
            form: {
                avatar: ""
            },
            avatar: "",
            loading: false
        };
    },
    watch: {
        'form.avatar': function (newVal) {
            if (newVal != this.avatar && newVal != '') {
                // 更新信息
                var input = {
                    avatar: newVal
                }
                api.UpdateUserInfo(input)
                    .then((res) => {
                        this.$message.success("头像修改成功");
                        this.avatar = newVal;
                        setUser(this.form);
                        window.location.reload();
                    }).catch((err) => {
                        this.form.avatar = this.avatar
                    })
            }
        }
    },
    methods: {
        LoadUserInfo: function () {
            this.loading = true;
            api.GetUserInfo()
                .then((res) => {
                    this.loading = false;
                    this.form = res.data;
                    this.avatar = this.form.avatar;
                }).catch((err) => {
                    this.loading = false;
                })
        }
    },
    mounted: function(){
        this.LoadUserInfo();
    }
};
</script>
<style>

.avatar{
    width: 100%;
    height: 100%;
}
</style>